<%--
  Created by IntelliJ IDEA.
  User: 米兰的小铁匠
  Date: 2020/6/2
  Time: 19:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<!--头部-->
<header>
    <div class="logo">
        <a href="http://localhost:8080/login_war_exploded/login.html">管理员登录</a>
        <div class="logo_search">
            <div class="search_txt">
                <input type="text" placeholder="请输入关键字搜索">
                <div class="search_img"></div>
            </div>
        </div>
    </div>
    <ul>
        <li>网站首页</li><li>学院概况</li><li>本科生教育</li><li>研究生教育</li><li>科学研究</li>
        <li>学生工作</li><li>招生工作</li><li>实验中心</li><li>党建之窗</li><li>抗击疫情</li>
    </ul>
    <img src="img/colonavirus.jpg">
</header>
<!--中部-->
<main>
    <div class="main_left">
        <ul>
            <li>分类</li>
            <li>团队</li>
            <li>平台</li>
            <li>成果</li>
        </ul>
        <div class="search">
            <div class="search_head">站内搜索</div>
            <input type="text" placeholder="请输入关键词进行搜索">
        </div>
    </div>
    <div class="main_right">
        <div class="category" name="category">新闻分类：${news.category}</div>
        <div class="title" name="title">${news.title}</div>
        <div class="newscontent" name="newscontent">${news.newsContent}</div>
        <div class="author" name="author">作者：${news.author}</div>
        <div class="writedate" name="writedate">更新时间：${news.newsDate}</div>
    </div>
</main>

<!--底部-->
<footer>
    <div class="swpu">Copyright© 2018 All Rights Reserved. 西南石油大学计算机科学学院</div>
</footer>
</body>
<style>
    /*头部*/
    header{
        width: 970px;
        height: 370px;
        margin: 0 auto;
    }
    .logo{
        width: 970px;
        height: 110px;
        background: url("img/top-bg.jpg");
    }
    .logo a{
        float: left;
    }
    .logo_search .search_txt{
        width: 280px;
        height: 35px;
        float: right;
        margin-top: 37px;
    }
    .logo_search input{
        width: 237px;
        height: 30px;
    }
    .search_img{
        width: 35px;
        height: 35px;
        float: right;
    }
    header ul{
        width: 970px;
        height: 35px;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #0c89ff;
    }
    header li{
        width: 97px;
        float: left;
        text-align: center;
        line-height: 35px;
    }
    header img{
        width: 970px;
        height: 225px;
        background-color: #2a6496;
    }
    /*中部*/
    main{
        width: 950px;
        height: 1000px;
        margin: 0 auto;
        padding: 10px;
    }
    .main_left{
        width: 200px;
        height: 400px;
        float: left;
        margin-right: 10px;
    }
    .main_left li{
        width: 200px;
        font-size: 16px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        margin-left: -40px;
        list-style: none;
    }
    .search_head{
        width: 200px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        background-color: #DDDDDD;
    }
    .search input{
        width: 195px;
        height: 40px;
    }
    .main_right{
        width: 740px;
        height: 1000px;
        float: left;
    }
    .title{
        width: 740px;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        margin-top: 20px;
    }
    .newscontent{
        text-indent: 2em;
        width: 740px;
        margin: 40px 0;
    }
    .author{
        width: 740px;
        text-align: center;
    }
    .writedate{
        float: right;
        margin-top: 40px;
    }

    /*底部*/
    footer{
        width: 100%;
        height: 80px;
        background-color: #2a6496;
    }
    .swpu{
        width: 400px;
        height: 80px;
        margin: 0 auto;
        line-height: 80px;
        font-size: 13px;
        color: white;
    }
</style>
</html>
